<template>
  <div class="setG">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item
        v-for="(v,i) in matchMsg.groupList"
        :key="i"
        :name="i"
        @click.native="toggCollaps(v.id)"
      >
        <template slot="title">{{v.name}}</template>
        <div v-if="matchMsg.type=='T'" class="xs">
          <p class="tip">选手最终成绩</p>
          <el-table :data="gradeTab" border style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="memberName" label="选手" align="center"></el-table-column>
            <el-table-column prop="entryNumber" label="参赛号" align="center"></el-table-column>
            <el-table-column prop="showSex" label="选手性别" align="center" v-if="matchMsg.gender=='T'"></el-table-column>
            <el-table-column prop="grade" label="选手用时" align="center"></el-table-column>
          </el-table>
        </div>
        <!-- <p class="tip">竞猜记录</p> -->
        <p class="smt">
          <span class="spanT">纪录状态</span>
          <span class="span" :class="showIt?'act':''" @click="toggleZJ" v-if="showZJ">已中奖</span>
          <span
            class="span"
            :class="showFM=='M'?'act':''"
            v-if="matchMsg.gender=='T'"
            @click="toggleFM('M')"
          >男</span>
          <span
            class="span"
            :class="showFM=='F'?'act':''"
            v-if="matchMsg.gender=='T'"
            @click="toggleFM('F')"
          >女</span>
        </p>
        <el-table :data="tabData.slice((currP-1)*10,currP*10)" border style="width: 100%">
          <el-table-column prop="nikeName" label="用户" align="center"></el-table-column>
          <el-table-column prop="phone" label="用户手机号" align="center"></el-table-column>
          <el-table-column prop="memberName" label="竞猜选手" align="center"></el-table-column>
          <el-table-column prop="showSex" label="选手性别" align="center"></el-table-column>
          <el-table-column prop="entryNumber" label="选手参赛号" align="center"></el-table-column>
          <el-table-column prop="uid2" label="竞猜名次" align="center"></el-table-column>
          <el-table-column prop="grade1" label="竞猜用时" align="center" v-if="matchMsg.type=='T'"></el-table-column>
          <el-table-column prop="showType" label="是否成功" align="center"></el-table-column>
        </el-table>
        <el-row class="rowB">
          <el-pagination
            :current-page.sync="currP"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="tabData.length"
          ></el-pagination>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
var actGid = "";
var allDate = [];
export default {
  props: ["matchMsg"],
  data() {
    return {
      activeName: 0, //默认展开项
      currP: 1,
      tabData: [],
      showZJ: false,
      showIt: false,
      showFM: "M",
      gradeTab: [],
    };
  },
  watch: {
    matchMsg: function (n, o) {
      this.init()
    },
  },
  methods: {
    tableRowClassName() {
      return "warning-row";
    },
    toggCollaps(gId) {
      if (this.activeName !== "") {
        if (gId == actGid) return false;
        this.tabData = [];
        allDate = [];
        actGid = gId;
        this.getTop3(gId);
        this.getrecord(gId);
      } else {
        this.gradeTab = [];
        this.tabData = [];
        allDate = [];
        actGid = "";
      }
      this.currP = 1;
    },
    getrecord(gId) {
      let oo = {
        matchId: this.matchMsg.matchId,
        groupId: gId,
      };
      this.$axios
        .get("/sbr/match/guess/getGuessRecord", { params: oo })
        .then((res) => {
          let rr = res.data.data;
          rr.forEach((v) => {
            if (v.sex == "M") v.showSex = "男";
            else if (v.sex == "F") v.showSex = "女";
            else v.showSex = "暂无";
            if (v.type == 1) v.showType = "竞猜成功";
            else if (v.type == 2) v.showType = "竞猜失败";
            else if (v.type == 3) v.showType = "成绩未发布";
          });
          this.tabData = rr;
          allDate = rr;
          if (this.matchMsg.gender == "T") this.toggleFM("M");
        });
    },
    toggleZJ() {
      this.showIt = !this.showIt;
      if (this.matchMsg.gender == "T") this.toggleFM(this.showFM);
      else {
        if (this.showIt) {
          this.tabData = allDate.filter((v) => {
            return v.type == 1;
          });
        } else {
          this.tabData = allDate;
        }
        this.currP = 1;
      }
    },
    toggleFM(i) {
      this.showFM = i;
      if (this.showIt) {
        this.tabData = allDate.filter((v) => {
          return v.type == 1 && v.sex == i;
        });
      } else {
        this.tabData = allDate.filter((v) => {
          return v.sex == i;
        });
      }
      this.currP = 1;
    },
    getTop3(gId) {
      let oo = {
        matchId: this.matchMsg.matchId,
        groupId: gId,
      };
      // console.log(oo);
      this.$axios
        .get("/sbr/match/getGuessMemberGradeTop3", { params: oo })
        .then((res) => {
          let rr = res.data.data;
          // if (rr.length > 0) {
          //   rr = rr.splice(0, this.matchMsg.num);
          // }
          rr.forEach((v) => {
            v.showSex = v.sex == "M" ? "男" : "女";
          });
          this.gradeTab = rr;
        });
    },
    init(){
      let wan = new Date(this.matchMsg.matchEndDate.replace(/-/g, "/")).getTime();
      let now = new Date().getTime();
      if (now > wan) this.showZJ = true;
      this.activeName = 0;
      if (this.matchMsg.groupList.length > 0) this.toggCollaps(this.matchMsg.groupList[0].id);
    }
  },
  mounted(){
    this.init()
  }
};
</script>
<style scoped>
.tip {
  font-size: 20px;
  font-weight: 500;
}
.xs >>> .el-table .warning-row {
  background: oldlace;
}
.smt {
  overflow: hidden;
  line-height: 36px;
  padding: 10px 0;
}
.spanT {
  float: left;
  margin-right: 16px;
  font-weight: 500;
  font-size: 20px;
}
.span {
  padding: 0 10px;
  border-radius: 20px;
  float: left;
  font-size: 20px;
  cursor: pointer;
}
.span.act {
  background-color: #409eff;
  color: #fff;
}
.CM {
  width: 280px;
}
.rowB {
  text-align: center;
  margin-top: 16px;
}
.setG >>> .el-collapse {
  border-color: #67c23a;
}
.setG >>> .el-collapse-item__header {
  background-color: #f0f9eb;
  color: #67c23a;
  text-indent: 20px;
  font-weight: 500;
  font-size: 22px;
  border-color: #67c23a;
}
.setG >>> .el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}
.setG >>> .el-collapse-item__wrap {
  border-color: #67c23a;
}
</style>